<div>
  <!-- Global settings -->
  <div class="kuiSideBarSection">
    <div class="kuiSideBarSectionTitle">
      <div class="kuiSideBarSectionTitle__text">
        Settings
      </div>
    </div>

    <div class="kuiSideBarFormRow">
      <label class="kuiSideBarFormRow__label" for="legendPosition">
        Legend Position
      </label>
      <div class="kuiSideBarFormRow__control">
        <select
          id="legendPosition"
          class="kuiSelect kuiSideBarSelect"
          ng-model="vis.params.legendPosition"
          ng-options="position for position in ['top', 'left', 'right', 'bottom']"
        ></select>
      </div>
    </div>

    <div class="kuiSideBarFormRow">
      <label class="kuiSideBarFormRow__label" for="showCursor">
        Show Tooltip
      </label>
      <div class="kuiSideBarFormRow__control">
        <input class="kuiCheckBox" id="showCursor" type="checkbox" ng-model="vis.params.addTooltip">
      </div>
    </div>

    <div class="kuiSideBarFormRow" ng-show="vis.hasSchemaAgg('segment', 'date_histogram')">
      <label class="kuiSideBarFormRow__label" for="currentTimeMarker">
        Current Time Marker
      </label>
      <div class="kuiSideBarFormRow__control">
        <input class="kuiCheckBox" id="currentTimeMarker" type="checkbox"
               ng-model="vis.params.addTimeMarker"
               ng-checked="vis.params.addTimeMarker"
        >
      </div>
    </div>

    <div class="kuiSideBarFormRow" ng-show="!vis.hasSchemaAgg('segment', 'date_histogram')">
      <label class="kuiSideBarFormRow__label" for="orderBuckets">
        Order Buckets by Sum
      </label>
      <div class="kuiSideBarFormRow__control">
        <input class="kuiCheckBox" id="orderBuckets" type="checkbox" ng-model="vis.params.orderBucketsBySum">
      </div>
    </div>

    <vislib-grid></vislib-grid>
  </div>

</div>
